<template>
  <div :class="sceneStore_ ? 'toolbar-right' : 'toolbar-rights'">
    <Move />
    <div class="toolbar-right-1"><SvgIcon icon-class="ic_指南针" @click="compass"> </SvgIcon></div>
    <div class="toolbar-right-1"><SvgIcon icon-class="ic_+" @click="magnify"> </SvgIcon></div>
    <div class="toolbar-right-1"><SvgIcon icon-class="ic_-" @click="shrink"> </SvgIcon></div>
    <div class="toolbar-right-1"><SvgIcon icon-class="ic_全屏" @click="fullScreen"> </SvgIcon></div>
    <Camera />
  </div>
</template>

<script lang="ts" setup>
import Move from './components/move/index.vue';
import Camera from './components/camera/index.vue';

const sceneStore_ = ref<boolean>(false);
const isFullScreen = ref<boolean>(false);
const { cimInstance } = window;
const compass = () => {
  cimInstance.api.setCameraHeadNorth();
};
const magnify = () => {
  cimInstance.api.forwardCameraByScale(0.1);
};
const shrink = () => {
  cimInstance.api.forwardCameraByScale(-0.1);
};
const fullScreen = () => {
  isFullScreen.value = !isFullScreen.value;
  if (isFullScreen.value) {
    cimInstance.api.fullScreen(document.body);
  } else {
    cimInstance.api.exitFullscreen();
  }
};
</script>

<style lang="less" scoped>
.toolbar-right {
  height: 278px;
  width: 36px;
  transition: right 0.4s ease-out;
  position: absolute;
  right: 16px;
  top: 95px;
  display: flex;
  flex-direction: column;
  transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  -webkit-transform: translateX(-300px);

  .toolbar-right-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background: #2a2e33;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;

    .svg-icon {
      font-size: 24px;
      margin: 0;
    }
  }
}
.toolbar-rights {
  height: 278px;
  width: 36px;
  transition: right 0.4s ease-out;
  position: absolute;
  right: 16px;
  top: 95px;
  display: flex;
  flex-direction: column;

  .toolbar-right-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background: #2a2e33;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;

    .svg-icon {
      font-size: 24px;
      margin: 0;
    }
  }
}
</style>
